<template>
    <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '300px'
        },
        pieData: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            chart: null
        }
    },
    // watch: {
    //     pieData: {
    //         deep: true,
    //         handler(val) {
    //             this.setOptions(val)
    //         }
    //     }
    // },
    mounted() {
        // this.$nextTick(() => {
        //     this.initChart()
        // })
        this.initChart();
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            this.setOptions(this.pieData);
        },
        setOptions({ wasteList, pieData } = {}) {
            this.chart.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    bottom: '10',
                    //   data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
                    data: wasteList
                },
                series: [
                    {
                        name: '危废焚化数量',
                        type: 'pie',
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    var colorlist = ['#63B8FF', '#CD6600', '#EFE42A', '#64BD3D', '#EE9201', '#32585a', '#00ff77', '#DA251D', '#E67716', '#FBC300', '#11440f', '#29AAE3', '#B74AE5', '#C33531'];
                                    return colorlist[params.dataIndex];
                                }
                            }
                        },
                        roseType: 'radius',
                        radius: [15, 95],
                        center: ['50%', '38%'],
                        // data: [
                        //   { value: 320, name: 'Industries' },
                        //   { value: 240, name: 'Technology' },
                        //   { value: 149, name: 'Forex' },
                        //   { value: 100, name: 'Gold' },
                        //   { value: 59, name: 'Forecasts' }
                        // ],
                        data: pieData,
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            })
        }
    }
}
</script>
